<!DOCTYPE html>
<html>
<head>
    <title>Rhombus Kinematics</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="400" style="border:1px solid #000;"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Parameters
    const l_canvas = 140; // canvas length for 'l'
    const angle = Math.PI / 4; // 45 degrees
    const ox = 80;
    const oy = 200;
    const vertexRadius = 4;

    // Calculate coordinates
    const Ax = ox;
    const Ay = oy;
    const Bx = ox + l_canvas * Math.cos(angle);
    const By = oy - l_canvas * Math.sin(angle); // B is above the AC line
    const Cx = ox + 2 * l_canvas * Math.cos(angle);
    const Cy = oy;
    const Dx = ox + l_canvas * Math.cos(angle);
    const Dy = oy + l_canvas * Math.sin(angle); // D is below the AC line

    // Draw Rhombus ABCD
    ctx.beginPath();
    ctx.moveTo(Ax, Ay);
    ctx.lineTo(Bx, By);
    ctx.lineTo(Cx, Cy);
    ctx.lineTo(Dx, Dy);
    ctx.closePath();
    ctx.stroke();

    // Draw dashed line AC
    ctx.beginPath();
    ctx.setLineDash([5, 5]);
    ctx.moveTo(Ax, Ay);
    ctx.lineTo(Cx, Cy);
    ctx.stroke();
    ctx.setLineDash([]); // Reset line dash

    // Draw vertices (hinges) as small filled circles
    function drawVertex(x, y) {
        ctx.beginPath();
        ctx.arc(x, y, vertexRadius, 0, 2 * Math.PI);
        ctx.fill();
    }
    drawVertex(Ax, Ay);
    drawVertex(Bx, By);
    drawVertex(Cx, Cy);
    drawVertex(Dx, Dy);

    // Draw labels for vertices A, B, C, D
    ctx.font = '24px Times New Roman';
    ctx.fillText('A', Ax - 20, Ay);
    ctx.fillText('B', Bx, By - 20);
    ctx.fillText('C', Cx + 20, Cy);
    ctx.fillText('D', Dx, Dy + 20);

    // Draw label for A (stationary) in Chinese
    ctx.font = '20px KaiTi'; // Font that supports Chinese characters
    ctx.fillText('(不动)', Ax, Ay + 30);

    // Draw side length labels 'l'
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('l', (Ax + Bx) / 2 - 15, (Ay + By) / 2 - 15);
    ctx.fillText('l', (Bx + Cx) / 2 + 15, (By + Cy) / 2 - 15);
    ctx.fillText('l', (Cx + Dx) / 2 + 15, (Cy + Dy) / 2 + 15);
    ctx.fillText('l', (Ax + Dx) / 2 - 15, (Ay + Dy) / 2 + 15);

    // Draw angle arcs and labels
    const arcRadius = 30;
    ctx.lineWidth = 1;

    // Angle at A (between horizontal AC and AB)
    ctx.beginPath();
    ctx.arc(Ax, Ay, arcRadius, 0, -angle, false); // from 0 to -45 deg, clockwise
    ctx.stroke();
    ctx.font = '20px Times New Roman';
    ctx.fillText('45°', Ax + arcRadius + 5, Ay - arcRadius / 2);

    // Angle at C (between horizontal CA and CB)
    ctx.beginPath();
    ctx.arc(Cx, Cy, arcRadius, Math.PI, Math.PI - angle, false); // from 180 to 135 deg, clockwise
    ctx.stroke();
    ctx.fillText('45°', Cx - arcRadius - 5, Cy - arcRadius / 2);

    // Helper function to draw an arrow
    function drawArrow(context, fromx, fromy, tox, toy) {
        const headlen = 10; // length of head in pixels
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        context.beginPath();
        context.moveTo(fromx, fromy);
        context.lineTo(tox, toy);
        context.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        context.moveTo(tox, toy);
        context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        context.stroke();
    }

    // Draw velocity and acceleration vectors at C
    ctx.lineWidth = 2;
    const arrowLength = 60;
    const arrowYOffset = 15;

    // Velocity vector 'v'
    drawArrow(ctx, Cx + 10, Cy - arrowYOffset, Cx + 10 + arrowLength, Cy - arrowYOffset);
    ctx.font = 'italic 24px Times New Roman';
    ctx.fillText('v', Cx + 10 + arrowLength + 15, Cy - arrowYOffset);

    // Acceleration vector 'a'
    drawArrow(ctx, Cx + 10, Cy + arrowYOffset, Cx + 10 + arrowLength, Cy + arrowYOffset);
    ctx.fillText('a', Cx + 10 + arrowLength + 15, Cy + arrowYOffset);

</script>
</body>
</html>